.resizablePanel{
    position: fixed;
    top: 96px;
    right: 0;
    bottom: 36px;
    :global(.react-resizable-handle) {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 10px;
        cursor: col-resize;
        box-shadow: -3px 0 3px -1px rgba(203, 203, 203, 0.2);
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
}

.aggregationPanelContainer{
    height: 100%;
    overflow: auto;
    background-color: #fefafb;
}

.multiPanelWrapper {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.panelColumn {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;

    /* Custom narrow scrollbar for webkit browsers */
    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar:hover {
        width: 4px;
    }

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.4);
    }

    /* Firefox scrollbar support */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.panelSeparator {
    width: 0px;
    background-color: #ebebeb;
    flex-shrink: 0;
}

.panelHeader {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #67637a;
    border-left: 1px solid #878396;
    padding: 8px 8px 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    input[type="checkbox"] {
        pointer-events: none;
        width: 16px;
        height: 16px;
    }
}
